<template>
	<view class="content">
		<block v-if="userIdentity==0">
			<!-- tab -->
			<view class="tab-box dis-flex flex-x-between " :style="{ top: navTop }" v-if="is_login">
				<view v-for="(item, index) in navTabList" :key="index" @click="bindTabIndex(index)" class="item dis-flex flex-box flex-dir-column flex-y-center flex-x-center">
					<view class="f_32" :class="navTabIndex == index ? 'navy_blue' : 'navy_blue'">{{ item }}</view>
					<view :class="navTabIndex == index ? 'active' : 'def'"></view>
				</view>
			</view>
			<!-- list -->
			<view class="course-list-box">
				<view v-if="courseList.length > 0" v-for="(item, index) in courseList" :key="index" class="item"
					@click="pageTo('/pages/course_detail/index', { course_id: item.course_id })">
					<view class="top dis-flex flex-y-center">
						<view class="left">
							<image class="image" :src="item.teacher!=null?item.teacher.headeravatar:imgPrefix('/static/image/icon/default_avatar.png')" mode="aspectFill"></image>
							</view>
						<view class="right">
							<view class="dis-flex">
								<view class="language_type_text flex-box" :class="'lan_' + languageClass(item.course_order.language)">{{ item.course_order.language }}</view>
								<view class="f_32 title onelist-hidden">{{ item.teacher.nickname }}</view>
							</view>
							<view class="dis-flex f_26 surplus gery1">
								<!-- <view class="view">{{ item.classdata == 1 ? '教师上门' : '学生上门' }}</view> -->
								<!-- 授课类型 -->
								<view class="view">第<text class="text">{{ item.index }}</text>课</view>
								<view class="view">剩余<text class="text">{{ item.surplus }}</text>课次</view>
							</view>
						</view>
					</view>
					<view class="bottom dis-flex flex-x-between">
						<view class="f_26 navy_blue">
							<block v-if="item.date!=''">
								<text>{{ item.date }}{{ item.week }}</text>
								<text class="m-l-15">{{ item.time }}</text>
							</block>
							<text v-else>请预约本课次上课时间</text>
						</view>
						<view class="f_26 dis-flex flex-y-center" :style="'color:' + statusColor(item.status, item.is_start)">
							<!-- 1-待上课，2-待预约，3-已完成 -->
							<text>{{ item.status == 3 ? (item.is_start ? '授课中' : '未开始') : item.status == 2 ? '预约上课' : item.status == 4 ? '课次已完成' : '' }}</text>
							<image class="next_icon" :src="item.status == 3 ? (item.is_start ? imgPrefix('/static/image/icon/next_orange.png') : imgPrefix('/static/image/icon/address_next.png')) : 
							(item.status == 3 ? imgPrefix('/static/image/icon/next.png'):imgPrefix('/static/image/icon/address_next.png'))"></image>
						</view>
					</view>
				</view>
			</view>
			<load-more v-if="is_login" :status="loadingStatus" :text="'暂无'+(navTabIndex==0?'待上':navTabIndex==1?'待预约':'往期')+'课程～'" defaultIcon="1"></load-more>
			<block v-else>
				<view class="no_login">
					<image class="image" :src="imgPrefix('/static/image/default_icon.png')" mode="widthFix"></image>
					<text class="f_24">暂未登录~</text>
					<view class="t-c" @tap="bindLogin()">点击登录</view>
				</view>
				<authorization @close="closeLoginPopup" :identity="userIdentity" @confirm="confirm" :showPopup="authorizationShow"></authorization>
			</block>
		</block>
	<teacher-view v-else :top="navTop" ref="teacherCom"></teacher-view>
	</view>
</template>

<script>
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
const app = getApp();
import { commonMixinFun } from '@/static/mixins/common.js'; // 公共
import { comPageMixinFun } from '@/static/mixins/comPageCommon.js'; // 组件页面公共
import { getIsIPhoneX } from '@/static/uitls/common.js'; // 机型判断
import API from '@/static/api/index.js';
import { getLangeClass } from '@/static/uitls/changeData.js';
import loadMore from '@/components/loadmore/index.vue';
import teacherView from '@/pages/teacher/tab_view/index.vue';
import authorization from '@/components/authorization/index.vue'; //authorization
export default {
	components: {
		teacherView,
		loadMore,
		authorization
	},
	mixins: [commonMixinFun, comPageMixinFun],
	data() {
		return {
			authorizationShow:false,
			proportion: 750 / uni.getSystemInfoSync().windowWidth, //将高度乘以换算后的该设备的rpx与px的比例
			navTop: '80px',
			loadingStatus: 'empty',
			num: 1,
			size: 10,
			total: 0,
			isRequest: false,
			navTabIndex: 0,
			navTabList: ['待上课程', '待预约', '往期课程'],
			courseList: []
			// 课程列表
		};
	},
	mounted() {
		this.navTop = Number(statusBarHeight + 44) + 'px';
	},
	watch: {
		navTabIndex(val, oldVal) {
			// 点击下标改变
			this.num = 1;
			this.isRequest = false;
			this._getCourseList();
		},
		num(val, oldVal) {
			this._getCourseList();
		}
	},
	methods: {
		bindLogin(){
			this.authorizationShow=true
		},
		closeLoginPopup(){
			this.authorizationShow=false
			this.is_login = app.globalData.LOGION;
		},
		confirm(){
			this.closeLoginPopup()
			this.userIdentity = app.globalData.userIdentity;
			this.comShow();
			app._log(this.userIdentity)
			this.$emit('setUserIdentity')
			app._log('被触发了')
		},
		statusColor(status, is_start) {
			let color = '';
			if (status == 3) {
				if (is_start) {
					//授课中
					color = '#ffa63e';
				} else {
					//未开始
					color = '#7f4aff';
				}
			} else if (status == 2) {
				//待预约
				color = '#7f4aff';
			} else if (status == 4) {
				//已完成
				color = 'rgba(37, 39, 72, 0.8)';
			}
			return color;
		},
		languageClass(title) {
			return getLangeClass(title);
		},
		// 通用方法 star
		// onLoad事件
		comLoad() {
			getIsIPhoneX().then(isIPhoneX => {
				this.isIPhoneX = isIPhoneX;
				app._log('iphoneX', isIPhoneX);
			});
		},
		// onShow事件
		comShow() {
			if(this.is_login){
				if(this.userIdentity==1){ // 教师
					setTimeout(()=>{
						this.$refs.teacherCom.getTAppointmentList()
					},100)
				}else{
					this._getCourseList();	//学生
				}
			}
		},
		comReachBottom() {
			//置底事件
			let { isRequest, num, total, courseList } = this;
			if (!isRequest && (num == 1 || courseList.length < total)) {
				this.num += 1;
			}
		},
		// 通用方法 end

		// 切换tab
		bindTabIndex(index) {
			if(this.is_login){
				this.navTabIndex = index;
			}
		},
		_getCourseList() {
			let { isRequest, num, size, navTabIndex } = this;
			if (!isRequest) {
				isRequest = true;
				this.loadingStatus = 'loading';
				API.getViewCourseList(num, size, navTabIndex + 1)
					.then(res => {
						app._log(res);
						let { code, data } = res;
						if (code == 1) {
							let list = num == 1 ? data.course : this.courseList.concat(data.course);
							this.courseList = list;
							this.total = data.total;
							this.loadingStatus = this.courseList.length == data.total ? 'nomore' : 'getmore';
						} else if(code==992){
							// this.is_login=false;
							
						}else{
							this.loadingStatus = code == 405 ? (num == 1 ? 'empty' : 'nomore') : 'error';
							if (num == 1) {
								this.courseList = [];
								this.total = 0;
							}
						}

						isRequest = false;
					})
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.m-l-15{
	margin-left: 15rpx;
}
.tab-box {
	position: sticky;
	width: 100%;
	top: 0px;
	left: 0;
	z-index: 9;
	background: #f8f8f8;
	.item {
		padding: 24rpx;
	}
	.active {
		width: 20px;
		height: 3px;
		background-image: linear-gradient(314deg, #9254ff 0%, #7f4aff 100%);
		border-radius: 8px;
		margin-top: 10rpx;
	}
	.def {
		width: 20px;
		height: 3px;
		margin-top: 10rpx;
	}
}
.course-list-box {
	// padding: 48rpx;
	padding: 48rpx 48rpx 0 48rpx;
	background-color: white;
	.item {
		background-color: #f4f4f4;
		border-radius: 32rpx;
		margin-bottom: 24rpx;
		padding: 0 32rpx;
		.top {
			padding: 32rpx 0;
			.left {
				font-size: 0;
				.image {
					width: 96rpx;
					height: 96rpx;
					margin-right: 22rpx;
					border-radius: 32rpx;
					border: 2rpx solid #fff;
				}
			}
			.right {
				.title {
					margin-left: 16rpx;
					width: 270rpx;
				}
				.surplus {
					margin-top: 16rpx;
					.text {
						color: #7f4aff;
					}
					.view {
						margin-right: 10rpx;
					}
				}
			}
		}
		.bottom {
			padding: 34rpx 0;
			border-top: 1px solid rgba(204, 204, 204, 0.5);
			.next_icon {
				margin-left: 6rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
}
.no_login{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.image{
		width: 392rpx;
	}
	.f_24{
		padding: 28rpx 0 40rpx;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		color: #8f8f9a;
		line-height: 40rpx;
		color: #8f8f9a;
	}
	.t-c{
		width: 350rpx;
		line-height: 92rpx;
		color: #fff;
		background-image: linear-gradient(270deg, 
			#7f4aff 0%, 
			#9254ff 100%);
		border-radius: 16rpx;
	}
}
</style>
